{% extends "static/view/template.html" %}
{% block body %}

<style>

.modal.modal-wide .modal-dialog {
  width: 90%;
}
.modal-wide .modal-body {
  overflow-y: auto;
}

a:hover {
    background-color: #80ff80;
    cursor: pointer;
}
.glyphicon:hover {
    background-color: #ffff00;
    cursor: pointer;
}

.glyphicon.glyphicon-remove{
    font-size: 18px;
}

</style>

<div id="app">
    <div class="container">
        <div class="page-header">
        </div>

        <div class="page-header">
            <h1> <font color= #333333><center>Multi-node Command</center></font>
                <small><center><font color= #778899></font></center></small>
            </h1>
        </div>
    </div>

    <div class="container" style="margin-top:20px;">
        <div class="row">
            <div class="col-xs-8"></div>
            <div class="col-xs-4">
            <div id="modal-button">
                <modal-button-template scenario_name='Scenario' :scenarios.sync="scenarios" :info.sync="info"></modal-button-template>
            </div>    
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6">
                <h3 class="text-center">Machine List</h3>
                <div class="well" style="max-height: 500px;overflow: auto;">
                    <machine-list :machines.sync="machines"></machine-list>
                </div>
            </div>
            <div class="col-xs-6">
                <h3 class="text-center">Command Text</h3>
                <div class="well" style="max-height: 300px;overflow: auto;">
                    <textarea class="form-control" rows="2" id="cmdtext" v-model="cmdtext" placeholder="eg. system.queue"></textarea>
                </div>

                <div class="row">
                <div id="call" class="collapse">
                <h3 class="text-center">Repeat Setting</h3>
                <div class="well" style="max-height: 300px;overflow: auto;">
                    <label for="interval">&nbsp interval(s) &nbsp</label>
                    <input class="interval" autofocus autocomplete="off" style="width: 35%;"
                           placeholder="eg. 3 (blank or 0 for once)"
                           v-model="interval"></input>
                    <label for="times">&nbsp times &nbsp</label>
                    <input class="times" autofocus autocomplete="off" style="width: 35%;"
                           placeholder="eg. 3 (blank or 0 for infinity)"
                           v-model="times"></input>
                </div>
                </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-8"></div>
            <send-req-button :machines="machines" 
                             :cmdtext="cmdtext"
                             :interval.sync="interval"
                             :times.sync="times"
                             :info.sync="info"
                             v-ref:send_button></send-req-button>
        </div>
    </div>

    <div class="container" style="margin-top:20px;">
        <div class="row">
            <div id="jsontable"></div>
        </div>
    </div>

    <div id="modals">
      <save-modal-template scenario_name='Scenario' 
                           :machines="machines"
                           :cmdtext="cmdtext"
                           :name.sync="name"
                           :author.sync="author"
                           :description.sync="description"
                           :interval.sync="interval"
                           :times.sync="times"
                           :info.sync="info"></save-modal-template>
      <load-modal-template scenario_name='Scenario'
                           :scenarios.sync="scenarios"
                           :machines.sync="machines"
                           :cmdtext.sync="cmdtext" 
                           :name.sync="name"
                           :author.sync="author"
                           :description.sync="description"
                           :interval.sync="interval"
                           :times.sync="times"
                           :info.sync="info"></load-modal-template>
    </div>

    <div id="info-modal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Info</h4>
          </div>
          <div class="modal-body">
              {{info}}
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
</div>



<script type="x/template" id="save-modal-template">
<div id="save-modal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Save {{scenario_name}}</h4>
      </div>
      <div class="modal-body">
        <div class="row">
            <div class="col-xs-4">
                <label for="scenarioname" >{{scenario_name}} Name</label>
                <input id="scenarioname" v-model="name">
            </div>
            <div class="col-xs-4">
            </div>
            <div class="col-xs-4">
                <label for="author" >Author</label>
                <input id="author" v-model="author">
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <label for="description" >Descrption</label>
                <textarea class="form-control" rows="5" id="description" v-model="description"></textarea>
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" @click='save'>Save</button>
        <button type="button" class="btn btn-default" data-dismiss="modal" >Cancel</button>
      </div>
    </div>
  </div>
</div>
</script>

<script type="x/template" id="load-modal-template">
<div id="load-modal" class="modal modal-wide fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">{{scenario_name}} List</h4>
      </div>
      <div class="modal-body">
        <table class="table table-striped" id="viewList">
        <thead>
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Author</th>
            <th>Load</th>
            <th>Delete</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="scenario in scenarios">
        <td>{{scenario.name}}</td>
        <td>{{scenario.description}}</td>
        <td>{{scenario.author}}</td>
        <td><span class="glyphicon glyphicon-import" @click="load(scenario)"></span></td>
        <td><span class="glyphicon glyphicon-remove" @click="remove(scenario)"></span></td>
        </tr>
        </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
</script>

<script type="x/template" id="modal-button-template">
<button class="btn btn-warning" onclick="window.open('multicmd.html');">New {{scenario_name}}</button>
<button class="btn btn-success" data-toggle="modal" data-target="#load-modal" @click='init'>Load {{scenario_name}}</button>
<button class="btn btn-info" data-toggle="modal" data-target="#save-modal" >Save {{scenario_name}}</button>
</script>

<script type="x/template" id="machine-list">
<ul class="list-group">
    <li class="list-group-item edit">
    <input class="new-machine" style="width: 100%;"
        autofocus autocomplete="off"
        placeholder="(Add MachineName:PortNum)"
        v-model="newMachine"
        @keyup.enter="add">
    </li>
    <li class="list-group-item" v-for="machine in machines">
    {{machine}}
    <span class="glyphicon glyphicon-remove pull-right" aria-hidden="true" @click="remove(machine)"></span>
    </li>
</ul>
</script>

<script type="x/template" id="send-req-button">
<button class="btn btn-primary col-xs-2" @click="send">Send command requests</button>
<button class="btn btn-default dropdown-toggle col-xs-1" data-toggle="collapse" data-target="#call">Repeat</button>
<button class="btn btn-danger col-xs-1" @click="stop">Stop</button>
</script>

<!--<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js"></script>-->
<script src="js/vue.js"></script>
<script src="https://cdn.rawgit.com/marianoguerra/json.human.js/master/src/json.human.js"></script>
<link href="https://cdn.rawgit.com/marianoguerra/json.human.js/master/css/json.human.css" rel="stylesheet" type="text/css">
<script src="js/multicmd.js"></script>


{% endblock %}
